.wifi-mng-page{
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #EBEAEF;

	.item{
		width: 100%;
	}
	.bg-clr{
		background-color: $color-brand;
	}
	.hg{
		height: 50Px;
		line-height: 50Px;
	}
	.hg2{
		height: 40Px;
		line-height: 40Px;
		border-radius: 40Px;
	}
	.ct{
		text-align: center;
	}

    .top{
    	.header-bar {
			width: 100%;
			z-index: 99;
		}

		.head-picker {
			color: #fff;
			font-size: 28px;

			.picker {
				padding: 10px 0 40px;
				height: 100%;
				width: 100%;
				text-align: center;

				text,.taro-text {
					display: inline-block;
					vertical-align: middle;
					font-size: 22px;
					border-radius: 34px;
					height: 34px;
					line-height: 34px;
					width: 80px;
					margin-left: 20px;
					border: 1px solid #fff;
				}
			}
		}
    }
    .mid{
    	flex: 1;
    	overflow: hidden;
	    overflow-y: auto;
	    padding: 20Px 0;

	    .wifi-list{
	    	width: 90%;
		    margin: 0 auto;
		    background-color: #fff;
		    border-radius: 4Px;
		    padding: 20Px 0;
		    overflow: hidden;
		    overflow-y: auto;

	    	.wl-item{
	    		display: flex;
	    		align-items: center;
	    		width: 90%;
			    margin: 0 auto;
			    padding: 12Px 0;
			    border-bottom: 1Px solid #F0F0F0;

			    &:last-child{
			    	border-bottom: none;
			    }

	    		.wl-item_left{
	    			flex: 1;
	    			white-space: normal;
    				word-break: break-all;
	    		}
	    		.wl-item_right{
	    			padding-left: 20Px;

	    			.oper-icon{
	    				margin-left: 20Px;
	    			}
	    		}
	    	}
	    	.empty-list{
	    		text-align: center;
			    color: #999;
			    font-size: 14Px;
	    	}
	    }
    }
    .bottom{
    	padding-bottom: 20rpx;
    	font-size: 32rpx;
    	color: #fff;
    }
}

.wifi-update-page{
	.wid{
		width: 90%;
		margin: 20Px auto 0;
	}
	.update-tips{
		display: flex;
		align-items: center;

		.tip-item{
			flex: 1;
			text-align: center;
			font-size: 14Px;

			.ti-icon{
				width: 46Px;
				height: 46Px;
				margin: 0 auto 5Px;
			    background-color: #ffa000;
			    border-radius: 50%;
			    display: flex;
			    align-items: center;
			    justify-content: center;

				.tip-img{
					width: 25Px;
					height: 25Px;

					img{
						width: 100%;
						height: 100%;
					}
				}
			}
		}
	}
	.update-data{
		flex: none;
		font-size: 13Px;

		.ud-item{
			padding: 0!important;

			.ipt-place-holder{
				font-size: 13Px;
			}
		}
		.ud-item_pd{
			height: 50Px;
		}
		.tip-text{
			color: #F1A33A;

			.text{
				padding-left: 10Px;
			}
		}
	}
	.bottom{
		width: 90%;
		margin: 0 auto;
	}
	.submit-btn{
		background-color: #ffa000;
		height: 80rpx;
		line-height: 80rpx;
	    border-radius: 80rpx;
	    width: 90%;
    	font-size: 32rpx;
    	color: #fff;
	}
}

.wifi-connect-page{
	height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	.connect-tip{
		flex: 1;
		display: flex;
		flex-direction: column;
	    align-items: center;
	    justify-content: center;

	    .connect-img{
	    	width: 300Px;
    		height: 180Px;
    		margin-bottom: 15Px;
	    }
	    .connect-ing{}
	    .connect-finish{}
	}
	.connect-success{
		color: #00d455;
	    font-size: 16Px;
	}
	.connect-fail{
		color: #c71301;
	    font-size: 16Px;
	}
	.tip-msg{
		padding-top: 10Px;
		font-size: 14Px;
		color: #c0c0c0;
	}
	.index-btn{
		background-color: #ffa000;
		height: 80rpx;
		line-height: 80rpx;
	    width: 90%;
    	font-size: 32rpx;
    	color: #fff;
    	text-align: center;
    	margin-bottom: 30Px;
	}
}

.code-layer{
	position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;

    background-color: rgba(0, 0, 0, .5);
    z-index: 99;

	.code-container{
	    width: 200Px;
	    margin: 40% auto 0;
	    display: flex;
	    flex-direction: column;
	    align-items: center;
	    transform: scale(1);
    	transition: transform .5s;

    	&.show{
    		transform: scale(1);
    	}

		.code-box{
			width: 100%;
		    flex: 1;
		    background-color: #fff;
		    border-radius: 4Px;
		    display: flex;
		    flex-direction: column;
		    align-items: center;
		    justify-content: center;
		    padding: 20Px 0;

			.code-img{
				width: 158Px;
				height: 158Px;
				background-color: #ccc;

				img{
					width: 100%;
					height: 100%;
				}
			}
			.down-code{
				padding: 10Px 0;

				.code-icon{
					vertical-align: text-bottom;
				}
				.down-text{
					color: #FEA000;
					font-size: 13Px;
					padding-left: 5Px;
				}
			}
		}
		.code-line{
			height: 50Px;
		    width: 1Px;
		    border-left: 1Px dashed #fff;
		}
		.code-close{
			.close-icon{}
		}
	}
}